body{
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: Monospace, serif;
    font-size: 13px;
    line-height: 24px;
    overscroll-behavior: none;
}

#controller{
    position: fixed;
    width: 310px;
    right: 0;
}

.spoiler{
    list-style: none;
    padding: 0;
    margin: 0;
    user-select: none;
}

.spoiler > .sp-li{
    padding: 2px 0 2px 14px;
    background-color: rgba(30, 30, 30, 0.5);
    border-left: 2px solid rgb(24, 111, 182);
    margin-left: 2px;
}

.closed > .sp-li{
    display: none;
}

.spoiler > .sub-title{
    background-color: rgba(30, 30, 30, 0.8);
    border-left: 2px solid rgb(121, 195, 255);
    margin-left: 2px;
}

.spoiler > .title{
    background-color: #111;
    cursor: pointer;
    padding: 0;
    border: none;
    user-select: none;
}

.spoiler > .title:before{
    content: "\e843";
    font-family: "pointer" !important;
    font-size: 8px;
    padding: 2px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.closed > .title:before{
    content: "\e845";
}

@font-face {font-family: "pointer";
    src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKQAAsAAAAABlwAAAJDAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgo4VQE2AiQDDAsIAAQgBYRtB0EbpgXInpo8bQlt+DCOACghDkIUD1/7/c7d3fe+ItogiUZtPp1kkvBGSSSIjZ8C02068Q077Zh+oKzEz7MLmnGAgWyAG9hwvrWfpcjCRJjCnWRQ6Hf2vw+UTpojgA04DT2XEHbd57mc3gQ6kPnt7JzGbFgvGmv5US/AOKBA98AoshIJxBt0FzEq6esxga5ZBDy8uHuktgKsCsRLEjlqW1lFKRptoZ44WMSHSju9pQt559+PP9vRJqkysPHo7jygo+/T7/P83+SSEnKE+HiFjDVAIa4nq6dqouCwbrC+3FkrQrqq0DRwow/XH/3jJaIG+vtgKa4lvk+xQvB9fkQCGdR2vcZIwk5uCZHzDaIvBIfqgKzRvMvDt0lrHqRdoob+apB3qYLgdvv3ZrR3egV8ff8vSTeDYluctN8QC/6IuXGk9DaI5NIa2BjDuSiTiLUyoQGS497j4anNw4S2qQPxlhmNrG2OLOwaKj3rqLXtoGuVOd4zoauJ0sGKFSGM2kiGfSIbdZOFfVCZ9qE2GhldxzG7sGchHrunCmcI2H5w8VKGKGpdMXiP6CV3atqcf4ZukgJLJtzGJUroFVvGa7Q9LeSoUrCOnkOeC1eVFN4W2Wy9w3mcetPCSUFdBxQ4BgLM+sAKT5RCOtl0vc/fg8iLnKMLvp36GaiNZHYmMWIDeRksN/l+5ZXhVWTbZEIsUqLAdDQPcjnB6vS8FHhmIR8or+3gcFzcGlw8Hy7+7xR0gUtzpMhRdF5Fbe7lrex5p1CdPYliIwIAAAA=') format('woff2'),
    url('../font/iconfont.woff') format('woff')
}

input[type=range]{
    -webkit-appearance: none;
    width: 190px;
    background-color: #29615c;
}
input[type=range]:disabled{
    background-color: #666;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: ew-resize;
} 
input[type=range]::-webkit-slider-runnable-track {
    height: 16px;
    cursor: ew-resize;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -2px;
    height: 20px;
    width: 10px;
    cursor: ew-resize;
    background: #33d390;
    border: solid 2px #88ff8e;
}
input[type=range]:disabled::-webkit-slider-thumb {
    background: #999;
    border: solid 2px #aaa;
}

button{
    background-color: #0d4675;
    color: white;
    cursor: pointer;
    padding: 5px 7px;
    margin: 2px;
    border: 2px solid #6bb0ff;
    border-radius: 5px;
}
button:focus{
    outline: none;
}
button:hover{
    background-color: #0b3e68;
    border: 2px solid #4c93e6;
}
button:active{
    background-color: #052a49;
    border: 2px solid #3883da;
}

button.danger{
    background-color: #750d0d;
    border: 2px solid #aa4949;
}
button.danger:hover{
    background-color: #680b0b;
    border: 2px solid #ac3a3a;
}
button.danger:active{
    background-color: #490505;
    border: 2px solid #912727;
}

button:disabled{
    background-color: #333 !important;
    border: 2px solid #666 !important;
    cursor: default !important;
}

#info{
    position: fixed;
    height: 100px;
    width: 180px;
    background-color: rgba(20, 20, 20, 0.5);
    overflow-y: auto;
    padding: 2px;
}
#info::-webkit-scrollbar{
    appearance: none;
    width: 5px;
    background-color: #111;
}
#info::-webkit-scrollbar-thumb{
    width: 5px;
    background-color: #333;
    border: 1px solid #666;
}

.info-primary{
    color: #6bb0ff;
    margin: 0;
}
.info-success{
    color: #33d390;
    margin: 0;
}
.info-danger{
    color: #d33333;
    margin: 0;
}